@charset "UTF-8";
//-----------------------------------------------------  
// mixin scss
// 包括常用的mixin，%及@function
// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段  
// @function，返回一个值，用于调用
//-----------------------------------------------------

// mixin & %
// 既定义了mixin也定义了%，根据需求使用@include或@extend调用
//-----------------------------------------------------

// inline-block
// ie6-7 *display: inline;*zoom:1;
@mixin inline-block ($extend:true) {
  @if $extend {
    @extend %inline-block;
  } @else {
    display: inline-block;
    @if $lte7 {
      *display: inline;*zoom:1;
    }
  }
}
%inline-block{
  @include inline-block(false);
}

// Center-align a block level element
// block得有宽度margin左右为auto才能居中
@mixin center-block ($extend:true) {
  @if $extend {
    @extend %center-block;
  } @else {
    margin-left: auto;
    margin-right: auto;
  }
}
%center-block{
  @include center-block(false);
}

// float left & right
@mixin float($float:left) {
  float: $float;
  @if $lte7 {
    display: inline;
  }
}
%float{
  @include float;
}

// clearfix
// 闭合子元素的浮动
@mixin clearfix ($extend:true) {
  @if $extend {
    @extend %clearfix;
  } @else {
    @if $lte7 {
      *zoom: 1;
    }
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
  }
}
%clearfix{
  @include clearfix(false);
}

// Hide from both screenreaders and browsers: h5bp.com/u
// 既隐藏于视觉也隐藏于屏幕浏览器
@mixin hidden ($extend:true) {
  @if $extend {
    @extend %hidden;
  } @else {
    display: none !important;
    visibility: hidden;    
  }
}
%hidden{
  @include hidden(false);
}

// Hide only visually, but have it available for screenreaders
// 只隐藏于视觉，屏幕浏览器可以阅读
@mixin visually-hidden ($extend:true) {
  @if $extend {
    @extend %visually-hidden;
  } @else {
    position: absolute;
    @if $lte7 {
      clip:rect(1px 1px 1px 1px);//ie6/7
    }
    clip:rect(1px, 1px, 1px, 1px);//standard
  }
}
%visually-hidden{
  @include visually-hidden(false);
}

// ul has list style
@mixin ul-has-style($style:disc){
  margin-left:25px;
  list-style:disc;
}
%ul-has-style{
  @include ul-has-style;
}

// 图片替换文字
// 高级浏览器直接2就可以
// 原生7,8不支持color的transparent，所以采用1;
// ie6用1会有一条细线，所以采用3
// 如果要兼容ie6，使用的时候请确定元素设置高度。
@mixin ir($height:99){
  font: 0/0 a; //1
  text-shadow: none;
  border:0 none;
  color: transparent; //2
  @if $lte7{ 
    _overflow:hidden; //3
    _font-size: 10px; //3
    _line-height: $height; //3
  }
}
%ir{
  @include ir;
}

// Text overflow
// 元素可以设置宽度才可应用省略号
%ellipsis-basic{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}
@mixin ellipsis($width:100%) {
  @extend %ellipsis-basic;
  width:$width;
}

// Opacity
// lte8使用filter兼容
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  @if $filter{
    filter: alpha(opacity=$opacity);
  }
}
%opacity{
  @include opacity;
}

// triangle
%triangle-basic{
  content:"";
  height: 0;
  width: 0;
  overflow:hidden;
}
@mixin triangle($direction, $size, $borderColor ) {
  @extend %triangle-basic;
  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  } 
  @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
}

//黑色背景色半透明
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){
  color:#fff;
  @if $filter{
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');
  }@else{
    background-color: #333;
  }
  background-color:$bgcolor;
}
%bgcolor-alpha{
  @include bgcolor-alpha;
}

// disabled
// 禁用样式，加!important
@mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}
%disabled{
  @include disabled;
}

// 水平间隔线，适用于行列表
@mixin horizontal-line($border:1px dashed $gray, $padding:10px){
  border-bottom:$border;
  padding-top:$padding;
  padding-bottom:$padding;  
}
%horizontal-line{
  @include horizontal-line;
}


// mixin
// 只定义了mixin，所以只能通过@include来调用
//-----------------------------------------------------

// rem
// thanks:http://drublic.de/blog/rem-fallback-sass-less/;
// @include rem(width,20)   ->   width: 280px; width: 20rem;
@mixin rem($property, $px) {
  #{$property}: $px * $baseFontSize;
  #{$property}: #{$px}rem;
}
// @include rem-font-size(2)  ->  font-size: 28px; font-size: 2rem;
@mixin rem-font-size($px) {
  font-size: $px * $baseFontSize;
  font-size: #{$px}rem;
}

//最小高度
@mixin min-height($height){
  min-height: $height;
  height: auto !important;
  @if $lte7{
    _height: $height;
  }
}

// Retina images. 
// @include image-2x("../images/img-2x.png", 200px, 200px);
// Use with care - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
@mixin image-2x($url, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    // on retina, use image that's scaled by 2
    background-image: url('#{$url}');
    background-size: $width $height;
  }
}

// 针对火狐浏览器打bug
// @include firefox{.test{padding-bottom:3px;}}
@mixin firefox {
  @-moz-document url-prefix(){
    @content;
  }
}


// %
// 只定义了%，所以只能通过@extend来调用
//-----------------------------------------------------

//为高级浏览器准备的box-sizing盒子模型，ie8+
%box-sizing-border{
  @include box-sizing;
}

// 普通all transition特效
%all-transition{
  @include transition;
}

// ie6/7 haslayout
%zoom{
  @if $lte7 {
    *zoom:1;
  }
}

// 垂直渐变，渐变背景是半透明到全透明，这样就可以通过设置背景色来表现渐变
//-------------------------
// 白色，由半透明到全透明
%gradient-linear-light {
  // IE9 SVG, needs conditional override of 'filter' to 'none' 
  background-image: url();
  @include gradient-vertical(rgba(255,255,255,0.3),rgba(255,255,255,0));
  @if $filter{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
    :root &{
      @extend %reset-filter;
    }
  }
}
// 黑色，由全透明到半透明
%gradient-linear-dark {
  // IE9 SVG, needs conditional override of 'filter' to 'none'
  background: url();
  @include gradient-vertical(rgba(0,0,0,0), rgba(0,0,0,0.25));
  @if $filter{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000',GradientType=0 ); /* IE6-8 */
    :root &{
       @extend %reset-filter;
    }
  }
}
// Reset gradient filters for IE
%reset-filter{
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}


//function
//-----------------------------------------------------  

// px转em
@function pxToEm($px, $base: 16) {
  @return ($px / $base) * 1em;
}

// 为颜色添加白色，以百分比形式
@function tint($color, $percent){
  @return mix(white, $color, $percent);
}

// 为颜色添加黑色，以百分比形式
@function shade($color, $percent){
  @return mix(black, $color, $percent);
}


// 定义一些常见元素的简单样式(btn,table,form)
// 这里只是满足简单的使用，更全更好的请参考各自的组件
//-----------------------------------------------------

// btn
// @include simple-btn;
// @include simple-btn(true);
// @include simple-btn($bgColor:$green);
@mixin simple-btn($formbtn:false, $bgColor: $primary, $textColor:$white){
  @include inline-block;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;

  font-size: 12px;
  padding:0  15px;
  @if $formbtn {
    height: 28px;
  }@else{
    line-height: 28px;
  }
  color: $textColor;
  background-color: $bgColor;
  border:0 none;

  &:hover{
    color: $textColor;
    background-color: darken($bgColor,5%);
  }
}

// table
// @include simple-table;
// @include simple-table(false);
// @include simple-table(true, $thBgColor: $orange);
@mixin simple-table($th:true, $borderColor: $gray, $thBgColor: $primary, $thTextColor:$white){
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: $baseGap;

  & th,
  & td{
    border:1px solid $borderColor;
  }

  th,td{
    padding: 8px;
    text-align: left;
  }
  // 如果
  @if $th{
    th{
      color: $thTextColor;
      background-color: $thBgColor;
      border-color:$thBgColor;
      border-bottom:0 none;
    }
  }
}

// input, select, textarea的基础样式
// 边框，padding
%simple-form-basic{
  border: 1px solid $gray;
  padding: 4px;
  vertical-align: middle;
  &:focus{
    outline: 0 none;
  }
}

// 输入框
@mixin simple-text($borderColorFocus: #52a8ec){
  @extend %simple-form-basic;
  height: 18px;
  
  @include transition(border linear 0.2s, box-shadow linear 0.2s);
  @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1));

  &:focus{
    border-color: rgba($borderColorFocus, 0.8);
    @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba($borderColorFocus, 0.6));
  }  
}
%simple-text{
  @include simple-text;
}

// textarea
@mixin simple-textarea($borderColorFocus:#52a8ec, $width:500px, $height:80px){
  @include simple-text($borderColorFocus);
  height: $height;
  width: $width;
  vertical-align: top;
}
%simple-textarea{
  @include simple-textarea;
}

// select
%simple-select{
  @extend %simple-form-basic;

  // select lte ie7
  // ie6,7 不支持select的padding
  @if $lte7 {
      *margin-top:5px;
      *margin-bottom:5px;
      *vertical-align:top;
  }
}

// radio & checkbox 的重置
%reset-radio-checkbox{
  margin:0 5px 0 0;
  padding:0;
  font-size: 13px;
  //ie6,7得设置宽度和高度才能表现和其他浏览器一样的重置
  //radio和checkbox的大小为13px
  @if $lte7 {
    *width:13px;
    *height:13px;
  }
}